<!DOCTYPE html>
<html>
<head>
    <title>Acousto-Optic Diffraction</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // Helper function to draw an arrow on a line
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 8;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke(); // Draw the line part first
            ctx.beginPath(); // Start a new path for the arrowhead
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // 1. Acousto-Optic Modulator (AOM) Body
        ctx.beginPath();
        ctx.moveTo(280, 40);
        ctx.lineTo(320, 50);
        ctx.lineTo(320, 380);
        ctx.lineTo(280, 370);
        ctx.closePath();
        ctx.fillStyle = '#E0E0E0';
        ctx.fill();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 2. Grating lines inside AOM
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        for (let y = 70; y < 370; y += 20) {
            // Calculate x positions to keep lines within the tilted rectangle
            const x_start = 280 + (y - 40) * (320 - 280) / (370 - 40) + 5;
            const x_end = 320 - 5;
            ctx.beginPath();
            ctx.moveTo(x_start, y);
            ctx.lineTo(x_end, y);
            ctx.stroke();
        }

        // 3. PET (Piezoelectric Transducer) and Input Signal
        ctx.fillStyle = 'black';
        ctx.fillRect(280, 370, 40, 15);
        ctx.font = "bold 18px Arial";
        ctx.fillStyle = 'black';
        ctx.fillText("PET", 330, 385);

        // Input signal lines and arrows
        ctx.lineWidth = 1;
        const y1 = 377.5, y2 = 382.5, x_start_sig = 280, x_end_sig = 210;
        ctx.beginPath();
        ctx.moveTo(x_start_sig, y1); ctx.lineTo(x_end_sig, y1);
        ctx.moveTo(x_start_sig, y2); ctx.lineTo(x_end_sig, y2);
        ctx.stroke();
        const headlen = 6, angle = Math.PI;
        ctx.beginPath();
        ctx.moveTo(x_end_sig, y1); ctx.lineTo(x_end_sig - headlen * Math.cos(angle - Math.PI / 6), y1 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x_end_sig, y1); ctx.lineTo(x_end_sig - headlen * Math.cos(angle + Math.PI / 6), y1 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.moveTo(x_end_sig, y2); ctx.lineTo(x_end_sig - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x_end_sig, y2); ctx.lineTo(x_end_sig - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();

        // Labels for input signal
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText("f", 240, 375);
        ctx.font = "italic 16px 'Times New Roman'";
        ctx.fillText("a", 249, 379);
        
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText("~", 185, 375);
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText("U", 185, 390);

        // 4. Velocity vector v
        ctx.lineWidth = 1.5;
        drawArrow(260, 150, 260, 80);
        ctx.font = "italic bold 22px 'Times New Roman'";
        ctx.fillText("v", 235, 115);
        // vector arrow over v
        ctx.beginPath();
        ctx.moveTo(235, 105);
        ctx.lineTo(248, 105);
        ctx.moveTo(244, 102);
        ctx.lineTo(248, 105);
        ctx.lineTo(244, 108);
        ctx.stroke();
        
        // 5. Incident Light (λ₀)
        const incident_y = [180, 200, 220];
        const incident_x_start = 50;
        const incident_x_end = 280;
        
        ctx.lineWidth = 1.5;
        incident_y.forEach(y => {
            drawArrow(incident_x_start, y, incident_x_end, y);
        });

        ctx.font = "24px 'Times New Roman'";
        ctx.fillText("λ", 150, 170);
        ctx.font = "16px 'Times New Roman'";
        ctx.fillText("0", 163, 175);

        // 6. Diffraction / Crossover
        const focalPoint = { x: 300, y: 200 };
        
        // Converging lines
        incident_y.forEach(y => {
            ctx.beginPath();
            ctx.moveTo(incident_x_end, y);
            ctx.lineTo(focalPoint.x, focalPoint.y);
            ctx.stroke();
        });
        
        // 7. Emerging diffracted beams
        const x_out_end = 580;

        // +1 order
        const plus1_y_end = [90, 110, 130, 150];
        plus1_y_end.forEach(y => {
            drawArrow(focalPoint.x, focalPoint.y, x_out_end, y);
        });
        ctx.font = "bold 24px Arial";
        ctx.fillText("+1", 500, 90);

        // 0 order
        const zero_y_end = [180, 200, 220];
         zero_y_end.forEach(y => {
            drawArrow(focalPoint.x, focalPoint.y, x_out_end, y);
        });

        // -1 order
        const minus1_y_end = [250, 270, 290, 310];
        minus1_y_end.forEach(y => {
            drawArrow(focalPoint.x, focalPoint.y, x_out_end, y);
        });
        ctx.font = "bold 24px Arial";
        ctx.fillText("-1", 500, 330);
    </script>
</body>
</html>